<script setup>
// 引入 api
import { ref } from "vue"

// 内容
const content = ref('')

// 用户名
const userName = ref('')

// 密码
const passWord = ref('')

// 确认密码
const comfirmPassWord = ref('')



// 点击函数
function btn1() {
    if (userName.value === '' || passWord.value === '' || comfirmPassWord.value === '') {
        if (userName.value === '') {
            return content.value = "请输入用户名"
        }
        if (passWord.value === '') {
            return content.value = "请输入密码"
        }
        if (comfirmPassWord.value === '') {
            return content.value = "请确认密码"
        }
    }

    // 判断密码和确认密码是否一致
    if (passWord.value !== comfirmPassWord.value) {
        return content.value = "请确认密码是否一致"
    }

    return content.value = `
    用户名：${userName.value}
    密码：${passWord.value}
    `
}
</script>

<template>
    <!-- 表单 -->
    <form>
        <input type="text" placeholder="用户名" v-model.trim="userName" />
        <br>
        <input type="password" placeholder="密码" v-model.trim="passWord" />
        <br>
        <input type="password" placeholder="确认密码" v-model.trim="comfirmPassWord" />
        <br>
        <input type="reset" value="重置表单" />
        <input type="button" value="提交" @click="btn1" />
    </form>

    <!-- 渲染 -->
    <p>{{ content }}</p>
</template>